<script setup lang="ts">
import { Switch } from '@element-plus/icons-vue'
import { reactive, watch } from 'vue'
import type { TicketInfo } from '@/types/SharedTypes'

// props
const props = defineProps<{
  ticketInfo: TicketInfo
}>()

// 创建本地搜索条件集合
const localTicketInfo = reactive(props.ticketInfo)

// 事件
const emit = defineEmits<{
  selectDepartureCity: [departureCity: string]
  selectTargetCity: [targetCity: string]
  swapDepartureTarget: []
  selectDepartureDate: [departureDate: string]
}>()

// 监视器
watch(localTicketInfo, () => {
  emit('selectDepartureCity', localTicketInfo.departureCity)
  emit('selectTargetCity', localTicketInfo.targetCity)
  emit('selectDepartureDate', localTicketInfo.departureDate)
})
</script>

<template>
  <el-card shadow="hover" style="width: 100%">
    <el-row justify="space-around">
      <el-col :span="5">
        <el-form-item label="出发地">
          <el-select v-model="localTicketInfo.departureCity" placeholder="请选择出发地">
            <el-option label="上海" value="shanghai" />
            <el-option label="北京" value="beijing" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" :icon="Switch" circle @click="emit('swapDepartureTarget')" />
      </el-col>
      <el-col :span="5">
        <el-form-item label="目的地">
          <el-select v-model="localTicketInfo.targetCity" placeholder="请选择目的地">
            <el-option label="上海" value="shanghai" />
            <el-option label="北京" value="beijing" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="出发日期">
          <el-date-picker
            v-model="localTicketInfo.departureDate"
            type="date"
            placeholder="选择出发时间"
          />
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="$">查询</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">

</style>